const OutputDir = process.env.VUE_APP_ENV === 'production' ? 'prod' : 'dev';
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.6.14/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.5.2/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.21.1/axios.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js',
    'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
  ]
}

module.exports = {
  outputDir: '../' + OutputDir + '-build/learn-admin/dist',
  productionSourceMap: false,
  transpileDependencies: ['element-ui', 'ele-admin', 'vue-i18n'],
  devServer: {
    proxy: {
      '/api': {
        target: 'http://laravel-base.hjdf.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
  chainWebpack: (config) => {
    config.plugins.delete('prefetch');
    // 生产环境注入cdn
    if (isProduction) {
      config.plugin('html').tap(args => {
        args[0].cdn = cdn;
        return args;
      });
    }
  },
  configureWebpack: config => {
    // 用cdn方式引入
    if (isProduction) {
      config.externals = {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'axios': 'axios',
        'nprogress': 'NProgress',
        'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          outputStyle: 'expanded'
        }
      }
    }
  }
}
